<template>
  <el-card style="min-height: 80vh;">
    <div class="box-card" ref="cardBody">
      <el-row style="margin-bottom: 5px;">
        <el-col :span="24">
          <el-select  placeholder="请选择班级" v-model="tbClassId" @change="clear" >
            <el-option v-for="tbClass in bjs" :key="tbClass.id" :value="tbClass.id" :label="tbClass.name"></el-option>
          </el-select>
          <el-select  placeholder="请选择课程" v-model="courseId" @change="clear"  >
            <el-option v-for="course in courses" :key="course.id" :value="course.id" :label="course.name"></el-option>
          </el-select>
          <el-button  icon="el-icon-search" type="primary" @click="cx">查询</el-button>
        </el-col>
      </el-row>
      <el-table
        height="76vh"
        size="mini"
        max-height="65.5vh"
        :data="data"
        border
        ref="table1"
        highlight-current-row
        v-if="tableVisible"

        >
        <el-table-column v-for="item,index in tableLable" :key="index" v-bind="item"></el-table-column>
        <el-table-column label="成绩" width="200">
          <template slot-scope="scope">
            <el-input-number  type="number" size="small" v-model="scope.row.grade" @change="setGrade(scope.row)"></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 0.625rem; float-;" v-if="tableVisible" >
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParams.page"
          :page-sizes="pageSizes" :page-size="queryParams.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        tableVisible:false,
        tbClassId: '',
        courseId: '',
        total: 0,
        bjs:[],
        courses:[],
        tableLable:[
          {label:'学号',prop:'student.stuNo'},
          {label:'姓名',prop:'student.name'},
        ],
 
        data:[],
        queryParams: {
          limit: 10,
          page: 1,
          sort: 'id',
          order: 'asc',
          search: ''
        },

        pageSizes: [10, 20, 30, 50],
      }
    },
    created() {

      this.$ajax.post('banji/list',{}).then(res=>{
        var result=res.data;
        this.bjs=result;

      });
      this.$ajax.post('course/list',{}).then(res=>{
        var result=res.data;
        this.courses=result;
      })
    },
    methods:{
      cx(){
        this.$ajax.post('grade/page',{courseId:this.courseId,tbClassId:this.tbClassId})
        .then(res=>{
          var tat=res.data;
          var result=res.data.data.rows;
          this.data=result;
          this.total = tat.data.total;
          this.tableVisible=true;
   
        })
      },
      clear(a){
        this.tableVisible=false;
      },
      //刷新
      refreshTable() {
        if (this.queryParams.limit * (this.queryParams.page - 1) >= this.total && this.queryParams.page > 1) {
          this.queryParams.page--;
        }
        console.log(this.queryParams)
        this.$ajax.post('grade/page', Object.assign({},this.queryParams, {courseId:this.courseId,tbClassId:this.tbClassId})).then(res => {
          var result = res.data;
          if (result.success) {
            // this.stus = result.data;
            this.data = result.data.rows;
            this.total = result.data.total;
            this.currentRow = null;
          }
        }).catch(err => {})
      },
      //分页每页数
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        this.queryParams.limit = val;
        this.refreshTable();
      },
      //分页当前页数
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);
        this.queryParams.page = val;
        this.refreshTable();
      },
      setGrade(grades){
        var grade = grades.grade;
        var id = grades.id;
        this.$ajax.post('grade/stuSave',{id:id,grade:grade}).then(res=>{
          var result=res.data;
          if(result.success){
              this.$message({
                message: '保存成功',
                type: 'success'
              });
          }
        }).catch(error => {
              alert('网络连接失败...');
            })
      }
    }
  }
</script>

<style>
</style>
